<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>12306 模仿界面 查询车票</title>
    <link rel="stylesheet" href="css/train_ticket.css">
    <link rel="stylesheet" href="iconfont1/iconfont.css">
</head>
<body>
<header class="header">
    <div class="headericon"><i class="i material-symbols:arrow-back-ios" onclick="location.href='home_page.html'"></i></div>
    <h3>西安<>嘉峪关</h3>
    <div class="headericon"><i class="i ep:more-filled"></i></div>

</header>
<div class="headerdate">
    <div class="headerdatediv">
        <p>今天</p>
        <h3>07.10</h3>
    </div>
    <div class="headerdatediv0">
        <p>周四</p>
        <h3>07.11</h3>
    </div>
    <div class="headerdatediv">
        <p>周五</p>
        <h3>07.12</h3>
    </div>
    <div class="headerdatediv">
        <p>周六</p>
        <h3>07.13</h3>
    </div>
    <div class="headerdatediv">
        <p>周日</p>
        <h3>07.14</h3>
    </div>
    <div class="headerdatediv">
        <p>周一</p>
        <h3>07.15</h3>
    </div>
    <div class="headerdatediv">
        <div><i class="i material-symbols:event-note-outline"></i></div>
        <h6>日历</h6>
    </div>
</div>
<div class="wrapper">
    <div class="ticketlist1">
        <div class="ticketlist1iconleft">
            <div>
                <i class="i mdi:train"></i>
            </div>
            <p>直达</p>
        </div>
        <div class="ticketlist1iconright">
            <div>
                <i class="i mdi:train-bus"></i>
            </div>
            <p>中转</p>
        </div>
    </div>
    <div class="ticketlist2">
        <div class="ticketlist2icon">
            <i class="i fluent-emoji-high-contrast:white-medium-square"></i>
            <p>只看高铁/动车</p>
        </div>
        <div class="ticketlist2icon">
            <i class="i fluent-emoji-high-contrast:white-medium-square"></i>
            <p>只看普通车</p>
        </div>
        <div class="ticketlist2icon">
            <i class="i fluent-emoji-high-contrast:white-medium-square"></i>
            <p>只看有票</p>
        </div>
        <div class="ticketlist2icon">
            <i class="i material-symbols:filter-alt-outline"></i>
            <p>筛选</p>
        </div>
    </div>
    <div class="ticketlist3">
        <div class="ticketlist3icon1">西安</div>
        <div class="ticketlist3icon2">西安北</div>
        <div class="ticketlist3icon3">嘉峪关南</div>
    </div>
    <div class="ticketlist4">
       <div class="ticketlist41">
           <div style="font-size: 5vw">
               08:00
           </div>
           <div class="ticketlist410">
               <div style="font-size: 4vw">
                   D2701
               </div>
               <div class="ticketlist411">
                   铺
               </div>
           </div>
           <div style="font-size: 5vw">
               15:07
           </div>
           <div class="ticketlist412" style="font-size: 4vw">
               &#165;710起
           </div>
       </div>
        <div class="ticketlist42">
            <div class="ticketlist421">
                <div class="ticketlist4211">始</div>
                <div style="font-size: 4vw">西安北</div>
            </div>
            <div class="ticketlist422">
                <div style="font-size: 4vw">7小时7分</div>
                <i class="i ep:caret-bottom"></i>
            </div>
            <div class="ticketlist423">
                <div class="ticketlist4231">过</div>
                <div style="font-size:4vw">嘉峪关南</div>
            </div>
        </div>
        <div class="ticketlist43">
            <div class="ticketlist431">
                <div>二等</div>
                <div style="color: #3c97f9">候补<i class="i material-symbols:add-circle"></i></div>
            </div>
            <div class="ticketlist432">
                <div>动卧</div>
                <div style="color: #17c217">1张</div>
            </div>
            <div class="ticketlist433">
                <div>无座</div>
                <div style="color: #a29696">无</div>
            </div>
        </div>
    </div>
    <div class="ticketlist4">
        <div class="ticketlist41">
            <div style="font-size: 5vw">
                08:30
            </div>
            <div class="ticketlist410">
                <div style="font-size: 4vw">
                    D2717
                </div>

            </div>
            <div style="font-size: 5vw">
                15:54
            </div>
            <div class="ticketlist412" style="font-size: 4vw">
                &#165;628.5起
            </div>
        </div>
        <div class="ticketlist42">
            <div class="ticketlist421">
                <div class="ticketlist4211">始</div>
                <div style="font-size: 4vw">西安北</div>
            </div>
            <div class="ticketlist422">
                <div style="font-size: 4vw">7小时24分</div>
                <i class="i ep:caret-bottom"></i>
            </div>
            <div class="ticketlist423">
                <div class="ticketlist4231">过</div>
                <div style="font-size:4vw">嘉峪关南</div>
            </div>
        </div>
        <div class="ticketlist43">
            <div class="ticketlist431">
                <div>二等</div>
                <div style="color: #3c97f9">候补<i class="i material-symbols:add-circle"></i></div>
            </div>
            <div class="ticketlist432">
                <div>一等</div>
                <div style="color: #17c217">5张</div>
            </div>
            <div class="ticketlist433">
                <div>无座</div>
                <div style="color: #a29696">无</div>
            </div>
        </div>
    </div>
    <div class="ticketlist4">
        <div class="ticketlist41">
            <div style="font-size: 5vw">
                10:21
            </div>
            <div class="ticketlist410">
                <div style="font-size: 4vw">
                    D2737
                </div>

            </div>
            <div style="font-size: 5vw">
                18:07
            </div>
            <div class="ticketlist412" style="font-size: 4vw">
                &#165;664.5起
            </div>
        </div>
        <div class="ticketlist42">
            <div class="ticketlist421">
                <div class="ticketlist4211">始</div>
                <div style="font-size: 4vw">西安北</div>
            </div>
            <div class="ticketlist422">
                <div style="font-size: 4vw">7小时46分</div>
                <i class="i ep:caret-bottom"></i>
            </div>
            <div class="ticketlist423">
                <div class="ticketlist4231">过</div>
                <div style="font-size:4vw">嘉峪关南</div>
            </div>
        </div>
        <div class="ticketlist43">
            <div class="ticketlist431">
                <div>二等</div>
                <div style="color: #3c97f9">候补<i class="i material-symbols:add-circle"></i></div>
            </div>
            <div class="ticketlist432">
                <div>一等</div>
                <div style="color: #17c217">1张</div>
            </div>
            <div class="ticketlist433">
                <div>无座</div>
                <div style="color: #a29696">无</div>
            </div>
        </div>
    </div>
    <div class="ticketlist4">
        <div class="ticketlist41">
            <div style="font-size: 5vw">
                07:48
            </div>
            <div class="ticketlist410">
                <div style="font-size: 4vw">
                    D2671
                </div>

            </div>
            <div style="font-size: 5vw">
                15:45
            </div>
            <div class="ticketlist412" style="font-size: 4vw">
                &#165;售罄
            </div>
        </div>
        <div class="ticketlist42">
            <div class="ticketlist421">
                <div class="ticketlist4211">始</div>
                <div style="font-size: 4vw">西安北</div>
            </div>
            <div class="ticketlist422">
                <div style="font-size: 4vw">7小时57分</div>
                <i class="i ep:caret-bottom"></i>
            </div>
            <div class="ticketlist423">
                <div class="ticketlist4231">终</div>
                <div style="font-size:4vw">嘉峪关南</div>
            </div>
        </div>
        <div class="ticketlist43">
            <div class="ticketlist431">
                <div>二等</div>
                <div style="color: #3c97f9">候补<i class="i material-symbols:add-circle"></i></div>
            </div>
            <div class="ticketlist432">
                <div>一等</div>
                <div style="color: #3c97f9">候补<i class="i material-symbols:add-circle"></i></div>
            </div>
            <div class="ticketlist433">
                <div>无座</div>
                <div style="color: #a29696">无</div>
            </div>
        </div>
    </div>
</div>
<!--底部菜单部分-->
<ul class="footer">
    <li>
        <i class="i material-symbols:filter-alt-outline"></i>
        <p>筛选</p>
    </li>
    <li>
        <i class="i material-symbols:nest-clock-farsight-analog-outline" style="color: #3c97f9"></i>
        <p style="color: #3c97f9">耗时最短</p>
    </li>
    <li>
        <i class="i ri:24-hours-fill"></i>
        <p>发时最早</p>
    </li>
    <li>
        <i class="i ep:price-tag"></i>
        <p>价格最低</p>
    </li>
    <li>
        <i class="i material-symbols:add-shopping-cart-outline-rounded"></i>
        <p>候补下单</p>
    </li>
</ul>
</body>
</html>